<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例：商品卡片</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .row {
            background-color: #F5F5F5;
            font-size: 0px;
            text-align: center;
        }

        .card {
            width: 234px;
            height: 300px;
            background-color: white;
            text-align: center;
            display: inline-block;
            margin: 10px;
        }

        p {
            line-height: 2em;
        }

        img {
            width: 160px;
            margin: 1.5em auto 0em auto;
        }

        .name {
            font-size: 14px;
        }

        .info {
            color: #B0B0B0;
            font-size: 12px;
        }

        .price {
            line-height: 3em;
            color: #FF6700;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <p>说明：图片和文本等信息参考自小米官网——https://www.mi.com/?masid=2701.0074</p>

    <div class="row">
        <div class="card">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab07e0fcbec3beb8b0f409db8bee8da4.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="手机图片">
            <p class="name">Xiaomi MIX 4</p>
            <p class="info">CUP全面屏</p>
            <p class="price">4999元起</p>
        </div>
        <div class="card">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab07e0fcbec3beb8b0f409db8bee8da4.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="手机图片">
            <p class="name">Xiaomi MIX 4</p>
            <p class="info">CUP全面屏</p>
            <p class="price">4999元起</p>
        </div>
        <div class="card">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab07e0fcbec3beb8b0f409db8bee8da4.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="手机图片">
            <p class="name">Xiaomi MIX 4</p>
            <p class="info">CUP全面屏</p>
            <p class="price">4999元起</p>
        </div>
        <div class="card">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab07e0fcbec3beb8b0f409db8bee8da4.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="手机图片">
            <p class="name">Xiaomi MIX 4</p>
            <p class="info">CUP全面屏</p>
            <p class="price">4999元起</p>
        </div>
        <div class="card">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab07e0fcbec3beb8b0f409db8bee8da4.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="手机图片">
            <p class="name">Xiaomi MIX 4</p>
            <p class="info">CUP全面屏</p>
            <p class="price">4999元起</p>
        </div>
        <div class="card">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab07e0fcbec3beb8b0f409db8bee8da4.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="手机图片">
            <p class="name">Xiaomi MIX 4</p>
            <p class="info">CUP全面屏</p>
            <p class="price">4999元起</p>
        </div>
        <div class="card">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab07e0fcbec3beb8b0f409db8bee8da4.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="手机图片">
            <p class="name">Xiaomi MIX 4</p>
            <p class="info">CUP全面屏</p>
            <p class="price">4999元起</p>
        </div>
    </div>
</body>
</html>